Creating a Composite Control

This topic describes the procedure to create a composite control.

The steps in this topic guide you to create the design-time library of a basic composite control that can be dragged to an XForm and used as is.
As an example, consider creating a Hyperlink control that, when added to an XForm, adds a hyperlink to it. At run time, clicking the hyperlink opens the specified URL in a new window. You will be able to modify the hyperlink text and URL during design-time.

Access the Composite Control Modeler ( ) to create a composite control. The Untitled Composite Control - Composite Control wizard appears.
Make appropriate modifications in the Untitled Composite Control - Composite Controlwizard.
- Type the name of the composite control in the Name field.
- Type a description for the composite control in the Description field.
- Select the Control Control Type option to provide the design-time and run-time libraries based on which the composite control must be created.
  
  Note:
  The REST URL Control Type option is used to create URL-based composite control.
  
  The title of the wizard changes to <composite control> - Composite Control.
In the Source XForm field, click to create an XForm that defines the composite control.

Note:
Alternatively click the to specify an existing xform from the Select Source XForm dialog box that displays. The Select Source XForm dialog box displays. Regenerate the Design Time Library if the Source XForm is modified.
In the Design Time Library field, click to create a design-time library and click Yes in the Confirmdialog box that displays.
Note:
- Alternately, click to specify an existing design-time library from the Select Design Time Library dialog box that displays. The <design-time library>.htm - Htm dialog box displays. Update location of setPublic and inherit in the Design Time Library if it is moved to another location after generation.
- When working on the Linux OS, ensure that the names of the libraries are in lower case.
Make appropriate modifications in the <design-time library>.htm - Htmdialog box.
- Type the name of the design-time library in the Name field. In this case, you can name the design-time library as hyperlink.
- Type a description for the design-time library in the Description field.
- In the Location field, select and specify the location at which the library must be saved in the Select Folder dialog box that displays.
  The <design-time library>.htm - Htmdialog box displays the following standard code structure using which you can build your design-time library. This template is automatically generated by the XForms Designer.
```
 <html onapplicationready=""><head> <script type="text/javascript"> setPublic(CompositeControlDT, "<automatically generated folder structure for designtimeLibrary>"); importType("cas.xforms.designerlibrary.controls.XFormsControl"); inherit(CompositeControlDT, XFormsControl); CompositeControlDT.icon = "/cordys/wcp/theme/default/icon/document/compositecontrol.png"; // This is the constructor of the composite control // It calls the base class's constructor function CompositeControlDT(designerView) { this.XFormsControl(designerView); } </script> </head><body></body></html>
```
  In the above code, designtimeLibrary refers to the location where the design-time library is stored.
Modify the standard code to define the required design-time functionality for your control and click . To view the design-time library used for the hyperlink control, see Design-time Library for Hyperlink Control. The design-time library for the control is created.

Repeat the steps 3 to 5 to similarly create a run-time library for the composite control. The standard code structure that displays for the run-time library is as follows. This template is automatically generated by the XForms Designer.

<!-- CompositeControlRT runtime control --> <html onapplicationready=""><head> <script type="text/javascript"> setPublic(CompositeControlRT, "<automatically generated folder structure for runtimeLibrary>"); importType("cas.xforms.runtimelibrary.CompositeControl"); inherit(CompositeControlRT, CompositeControl); function CompositeControlRT() { } function CompositeControlRT.attachType( control ) { //TODO: add attach code here } function CompositeControlRT.detachType( control ) { //TODO: add detach code here } </script> </head><body></body></html>

In the above code, runtimeLibrary refers to the location where the run-time library is stored. To view the run-time library used for the hyperlink control, see Run-time Library for Hyperlink Control.
The run-time library for the control is created.

In the Property Sheet field, click to create a property sheet for the composite control and click Yes in the Confirm dialog box that displays. Checking Extend Propertiescreates a property sheet extending the property sheet of the design time control from which this composite control is created. Please note that the checking/unchecking of this check box is not persisted.

Note:
Alternately, click to specify an existing property sheet from the Select Property Sheet dialog box that displays. The XForms Designer opens and the <property sheet> - XForm displays. In addition to some XForm controls, the Toolbox tab displays the common controls used in a property sheet such as Date, Event, Id, Model, Reference, Web Service, and XML. For information about these, see Controls Available for Creating Property Sheets.
Drag the required controls from the Toolboxtab to design a property sheet for the control. In case of the Hyperlink composite control, the property sheet will contain an Id field, a Text field to input the text to be displayed as a link, and a Link field to input the URL to be used as a link.
1. Drag the ID control to the XForm and provide a unique id to it.
2. Drag an Input control, rename it to Text, and provide a unique id to it. Type @textId in the Reference field. This reference is used in the run-time library to set text values at runtime.
3. Drag another Input control, rename it to Link, and provide a unique id to it. Type @linkId in the Reference field. This reference is used in the run-time library to set URL values at runtime.
4. Add the onChange event to the Text and Link Input controls, and specify the following in the auto-generated function (in the Scripttab).
```
htmlElement.control.updateText(htmlElement,eventObject.srcElement.getValue());
```
Click . The property sheet for the control is created and saved in the XML Store.

Note:
If you skip steps 7 and 8 and do not create a property sheet for the composite control, a default property sheet is automatically added to the control. This property sheet contains only the ID field.
In the Schema tab, enter the XML schema to be used for mapping the control using a message map. For more information, see Using Message Map.
Click in the <composite control> - Composite Control dialog box. The composite control is created and displayed in the Workspace Documents window. You can drag the composite control to an XForm to use it. Alternately, you can right-click the XForm, select Insert Composite Control, and drag the required composite control from the Composite Controlsdialog box that displays. This right-click menu option is available for a split area, an XForm, and for the Group, Groupbox, and Tab Page grouping controls.
Note:
Process Platform is now multiple browser compliant. For composite controls created in Cordys BOP-4 that are now ported to Cordys BOP 4.1 and need to be made multiple browser compliant, you must ensure multiple browser support for the same.
- If no custom modifications were made to the design-time and runtime libraries of the composite control, you can delete the libraries and generate new ones in Cordys BOP 4.1.
- If you had made custom modifications to the design-time and runtime libraries of the composite control, you must manually provide custom script for multiple browser support. For details, refer to Enabling Multi-browser Support for Web Content.

Note:
Before building the package, create Web Library Definition for composite controls in the libraries folder and ensure that the design-time and run-time libraries are packed along with the application.

pp108 : Creating a Composite Control

Creating a Composite Control